<template>
  <div class="version">
    <h1>当前版本:{{ state.version }}</h1>
    <button @click="autoUpdate()">获取更新</button>
    <ol id="content">
      <li>生命周期过程展示</li>
    </ol>
  </div>
</template>

<script>
import config from "../../package.json";
import { ipcRenderer } from "electron";
import { onMounted, reactive } from "vue";
export default {
  name: "Version.vue",
  setup() {
    const state = reactive({
      version: config.version,
    });

    const autoUpdate = () => {
      ipcRenderer.send("update", "更新...");
    };

    onMounted(() => {
      var ol = document.getElementById("content");
      ipcRenderer.on("message", (event, { message, data }) => {
        let li = document.createElement("li");
        li.innerHTML = message + " <br>data:" + JSON.stringify(data) + "<hr>";
        ol.appendChild(li);
        if (message === "isUpdateNow") {
          if (confirm("是否现在更新？")) {
            window.ipcRenderer.send("updateNow", "立即更新");
          }
        }
      });
    });

    return {
      autoUpdate,
      state,
    };
  },
};
</script>

<style scoped></style>
